<template>
	<div>
		<div v-if="tabNum<19">
			<scroller ref='scrollerEvent' lock-x>
				<div>
					<div class="textTile flex-h">

						<span class="sp1 flex1">职业兴趣测试</span>
						<span class="sp2"><b>{{tabNum}}</b><i>/20</i></span>
					</div>
					<div class="titleBlankBar"><div class="titleBar">
					<span v-show="tabNum==1 || tabNum==4 || tabNum==7 || tabNum==10 || tabNum==13 || tabNum==16">以下活动中不管是否能做好，选中您喜欢的</span>
					<span v-show="tabNum==2 || tabNum==5 || tabNum==8 || tabNum==11 || tabNum==14 || tabNum==17 ">请就以下描述中选择您具备的能力，选中代表具备</span>
					<span v-show="tabNum==3 || tabNum==6 || tabNum==9 || tabNum==12 || tabNum==15 || tabNum==18">请就以下职行业中，选中您有兴趣的</span>
					</div></div>
					<div v-for="(item,index) in intelData.history" :key="index">
						<div class="textQuestions" v-show="item.isShow===tabNum">
							<div @click="clickSure(index,item.state)" class="flex-h questions"><span class="flex1">{{item.issue}}</span><img
								 style="width: 0.4rem;height: 0.4rem;display: inline-block;" :src="checkList.indexOf(index) !== -1 ?imgs2:imgs1"
								 alt=""></div>
						</div>
					</div>
					<div class="commonBoxPre zyxq">
						<span class="sp3" @click="nextShow">下一组</span>
					</div>
					<div class="titleBlankBar" style="height: 2rem;"></div>
				</div>
			</scroller>
		</div>
		<div v-if="tabNum===19">
			<div class="textQuestions">
				<span>181.请对你在以下方面的能力进行强弱排序</span>
			</div>
			<div class="titlesDrag flex-h">
				<span class="sp1">强</span>
				<span class="flex1 sp2">以下项目可长按图标拖动排序</span>
			</div>
			<specIssue :items='ites' v-on:fromChildData='getChildData'></specIssue>
			<div class="titlesDrag titlesDrag1 flex-h">
				<span class="sp1">弱</span>
				<span class="flex1 sp2"></span>
			</div>
			<div class="commonBox zyxq has-bottombar">
				<span class="sp3" @click="nextZu('')">下一组</span>
			</div>
		</div>
		<div v-if="tabNum===20">
			<div class="textQuestions">
				<span>182.请对你在以下方面的技能进行强弱排序</span>
			</div>
			<div class="titlesDrag flex-h">
				<span class="sp1">强</span>
				<span class="flex1 sp2">以下项目可长按图标拖动排序</span>
			</div>
			<specIssue :items='ites2' v-on:fromChildData='getChildData'></specIssue>

			<div class="titlesDrag titlesDrag1 flex-h">
				<span class="sp1">弱</span>
				<span class="flex1 sp2"></span>
			</div>
			<div class="commonBox zyxq has-bottombar">
				<span class="sp3" @click="nextZu('IndResult')">做完了</span>
			</div>
		</div>


	</div>
</template>

<script>
	import ls from 'store2';
	import specIssue from '~/components/specIssue'
	import intelData from '~/static/json/intelligence.json'
	import {
		Scroller
	} from 'vux'
	export default {
		props: {

		},
		components: {
			specIssue,
			Scroller
		},
		data() {
			return {
				
				imgs1: require('~/static/images/search_icon_nor.png'),
				imgs2: require('~/static/images/search_icon_sure.png'),
				ites: [{
					nm: '机械操作能力',
					type: 'R'
				}, {
					nm: '科学研究能力',
					type: 'I'
				}, {
					nm: '艺术创作能力',
					type: 'A'
				}, {
					nm: '解释表达能力',
					type: 'S'
				}, {
					nm: '商业洽谈能力',
					type: 'E'
				}, {
					nm: '事务执行能力',
					type: 'C'
				}],
				ites2: [{
					nm: '体育技能',
					type: 'R'
				}, {
					nm: '数学技能',
					type: 'I'
				}, {
					nm: '音乐技能',
					type: 'A'
				}, {
					nm: '交际技能',
					type: 'S'
				}, {
					nm: '领导技能',
					type: 'E'
				}, {
					nm: '办公技能',
					type: 'C'
				}],
				tabNum: 1,
				intelData: intelData,
				zyxqScore: [0, 0, 0, 0, 0, 0],
				tabIndex: null,
				checkList: []
			};
		},
		computed: {

		},
		mounted: function() {

		}, 
		methods: {
			nextShow() {
				this.$nextTick(() => {
					this.$refs.scrollerEvent.reset({top: 0})
				})
				if (this.tabNum == 3) {
					this.zyxqScore[0] = this.checkList.length;
					this.checkList = []

				} else if (this.tabNum == 6) {
					this.zyxqScore[1] = this.checkList.length;
					this.checkList = []
				} else if (this.tabNum == 9) {
					this.zyxqScore[2] = this.checkList.length;
					this.checkList = []
				} else if (this.tabNum == 12) {
					this.zyxqScore[3] = this.checkList.length;
					this.checkList = []
				} else if (this.tabNum == 15) {
					this.zyxqScore[4] = this.checkList.length;
					this.checkList = []
				} else if (this.tabNum == 18) {
					this.zyxqScore[5] = this.checkList.length;
					this.checkList = []
				}
				this.tabNum += 1
				
				
			},
			clickSure(index, state) {			
				if (this.checkList.indexOf(index) > -1) {
					let $index = this.checkList.indexOf(index)
					this.checkList.splice($index, 1)
				} else {
					this.checkList.push(index)
				}

			
			},

			getChildData(data) {
				this.childData = data

			},
			nextZu(url) {

				if (this.childData) {
					this.childData.forEach(ite => {
						if (ite.type === 'R') {
							this.zyxqScore[0] += ite.numR
						}
						if (ite.type === 'S') {
							this.zyxqScore[1] += ite.numS
						}
						if (ite.type === 'I') {
							this.zyxqScore[2] += ite.numI
						}
						if (ite.type === 'E') {
							this.zyxqScore[3] += ite.numE
						}
						if (ite.type === 'A') {
							this.zyxqScore[4] += ite.numA
						}
						if (ite.type === 'C') {
							this.zyxqScore[5] += ite.numC
						}
					})
				} else {
					this.zyxqScore[0] += 6
					this.zyxqScore[1] += 5
					this.zyxqScore[2] += 4
					this.zyxqScore[3] += 3
					this.zyxqScore[4] += 2
					this.zyxqScore[5] += 1
				}
				if (url === 'IndResult') {
					this.$vux.loading.show({text:"正在拼命加载~"})
					ls.set('scoreData', this.zyxqScore)
					let obj = {
						status: 1,
						worthScore: this.zyxqScore
					}
					ls.set('resultPar', obj)
					if (ls.get('surplusVom') == '0') {
						this.commonJs.gosto('IndFreeResult')
					} else {
						this.commonJs.gosto('IndResult')
					}

				} else {
					this.tabNum += 1;
				}
			}
		}
	};
</script>


<style scoped lang="less">
// 	.createTeastWrap .testBoxWrap /deep/.testWrap{
// 		height: 100%;
// 	}
	.titleBar {
		position: absolute;
		width: 6.9rem;
		height: 0.8rem;
		background: rgba(255, 247, 212, 1);
		left: 0;
		padding: 0 0.05rem;
		box-sizing: border-box;
		line-height: 0.8rem;

		span {
			font-size: 0.24rem;
			font-family: 'PingFangSC-Semibold';
			font-weight: 600;
			color: rgba(34, 34, 34, 1);
		}
	}

	.titleBlankBar {
		width: 6.9rem;
		height: 0.8rem;
		position: relative;
	}

	.textTile {
		padding-bottom: 0.4rem;
		height: auto;
		width: 100%;
		// border-bottom: 0.01rem solid rgba(238, 238, 238, 1);

		.sp1 {
			font-size: 0.4rem;
			font-weight: bold;
			color: rgba(34, 34, 34, 1);
			line-height: 0.44rem;
		}

		.sp2 {
			b {
				font-size: 0.4rem;
				font-weight: bold;
				color: @mainColor;
			}

			i {
				font-size: 0.22rem;
				font-weight: bold;
				color: rgba(187, 187, 187, 1);
				// line-height:30px;
			}
		}
	}

	.textQuestions {
		width: 100%;
		height: auto;

		// padding-top: 0.3rem;
		.questions {
			padding: 0.2rem 0;
			box-sizing: border-box;
			border-bottom: 0.01rem solid rgba(229, 232, 237, 1);
		}

		span {
			font-size: 0.28rem;
			// font-weight: bold;
			color: rgba(34, 34, 34, 1);
			line-height: 0.45rem;
		}
	}

	.titlesDrag {
		width: 100%;
		height: 0.8rem;
		margin-top: 0.5rem;

		.sp1,
		.sp2 {
			font-size: 0.26rem;
			font-weight: bold;
			box-sizing: border-box;
			height: 0.8rem;
		}

		.sp1 {
			width: 1.5rem;
			padding-top: 0.4rem;
			color: rgba(82, 196, 26, 1);

		}

		.sp2 {
			padding-top: 0.2rem;

			color: rgba(187, 187, 187, 1);

		}
	}

	.titlesDrag1 {
		height: 0.4rem;
		margin-top: 0;
		font-size: 0.3rem;

		.sp1,
		.sp2 {
			height: 0.4rem;
			padding-top: 0;
			color: rgba(187, 187, 187, 1);
		}
	}

	.commonBox {
		position: absolute;
		width: 100%;
		height: 0.9rem;
		left: 0;
		bottom: 0.4rem;
		padding: 0 0.3rem;
		box-sizing: border-box;
	}

	.commonBoxPre {
		width: 100%;
		height: 0.9rem;
		margin-top: 0.5rem;
	}

	.zyxq {
		.sp1 {
			height: 0.9rem;
			border-radius: 0.1rem;
			border: 0.02rem solid rgba(238, 238, 238, 1);
			font-size: 0.3rem;

			font-weight: bold;
			color: rgba(34, 34, 34, 1);
			line-height: 0.9rem;
			text-align: center;
		}

		.sp3 {
			width: 6.1rem;
			height: 0.9rem;
			border-radius: 0.1rem;
			border: 0.02rem solid @mainColor;
			margin: 0 auto;
			display: block;
			line-height: 0.9rem;
			text-align: center;
			font-size: 0.3rem;
			// font-weight: bold;
			color: @mainColor;
		}

		span:nth-of-type(1) {
			margin-right: 0.2rem;
		}
	}
</style>
